<template>
	<div class="login">
		<div class="loginTop">
			<i @click="$router.go(-1)" class="iconfont icon-zuo"></i>
			<img src="../assets/images/logo_mtime.png" alt="" />
		</div>
		<div class="loginMobile">
			<div>
				<img src="../assets/images/user.png" alt="" />
			</div>
			<input type="text" placeholder="登录邮箱/手机号码">
		</div>
		<div class="xian"></div>
		<div class="loginMobile">
			<div>
				<img src="../assets/images/password.png" alt="" />
			</div>
			<input type="password" placeholder="密码">
			<span>显示密码</span>
		</div>
		<div class="loginBottom">
			<div class="loginL">
				<button>登录</button>
			</div>
			<div class="loginH">
				<span class="span1">免费注册</span>
				<span class="span2">找回密码</span>
			</div>
		</div>
		<div class="loginThird">
			<span>使用第三方登录</span>
			<div>
				<img src="../assets/images/sina.png" alt="" />
				<img src="../assets/images/qq.png" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Login",
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/assets/css/common.scss';
	.login{
		.loginTop{
			position: relative;
			background: #333;
			width: 100%;
			height: vw(50);
			display: flex;
			justify-content: center;
			align-items: center;
			i{
				position: absolute;
				left: vw(16);
				color: #fff;
				font-size: vw(22);
			}
			img{
				width: vw(65);
				height: vw(21);
			}
		}
		.loginMobile{
			display: flex;
			height: vw(50);
			align-items: center;
			>div{
				width: vw(64);
				padding-left: vw(30);
				img{
					width: vw(24);
					height: vw(30);
					color: #000;
				}
			}
			input{
				border: none;
				font-size: vw(16);
			}
			span{
				color: #007aff;
				font-size: vw(16);
				margin-left: vw(30);
			}
		}
		.xian{
			width: 100%-vw(64);
			margin-left: vw(64);
			border: .5px solid #eee;
		}
		.loginBottom{
			width: 100%;
			background: #f4f8ed;
			.loginL{
				padding: vw(20) 0 ;
				button{
					display: block;
					width: vw(340);
					height: vw(50);
					background: #1e7dd7;
					color: #fff;
					font-size: vw(20);
					text-align: center;
					margin: 0 auto;
					border: none;
					border-radius: vw(20);
				}
			}
			.loginH{
				width: vw(340);
				height: vw(50);
				margin: 0 auto;
				.span1{
					color: #007aff;
					font-size: vw(16);
				}
				.span2{
					font-size: vw(16);
					margin-left: vw(212);
				}
			}
		}
		.loginThird{
			>span{
				display: block;
				width: 100%;
				font-size: vw(16);
				color: #999;
				text-align: center;
				margin-bottom: vw(20);
			}
			>div{
				width: 100%;
				text-align: center;
				img{
					width: vw(70);
					height: vw(70);
					margin: 0 vw(15);
				}
			}
		}
	}
</style>